<template>
  <div class="vm">
    <div ref="map" class="map-x"></div>
    <div class="btn-x">
      <button @click="showKrigingVector()">克里金矢量(Vector)</button>
      <button @click="showKrigingImage()">克里金图像(Image)</button>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import LayerVector from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON.js";
import Style from "ol/style/Style.js";
import Fill from "ol/style/Fill.js";
import Stroke from "ol/style/Stroke.js";
import ImageLayer from "ol/layer/Image.js";
import ImageCanvasSource from "ol/source/ImageCanvas.js";
import  krigingContour from "./js/kriging-contour";

let krigingCanvasLayer, krigingVectorSource, krigingVectorLayer, format;
let dataset
export default {
  data() {
    return {
      map: null, // 地图
      params: {
        mapCenter: [118, 32],
        maxValue: 100,
        krigingModel: "exponential", //'exponential','gaussian','spherical'
        krigingSigma2: 0,
        krigingAlpha: 100,
        canvasAlpha: 0.9,
        colors: [
          "#006837",
          "#1a9850",
          "#66bd63",
          "#a6d96a",
          "#d9ef8b",
          "#ffffbf",
          "#fee08b",
          "#fdae61",
          "#f46d43",
          "#d73027",
          "#a50026",
        ],
      },
    };
  },

  methods: {
    showKrigingImage() {
      krigingVectorLayer.setVisible(false);

      let imageSource = new ImageCanvasSource({
        canvasFunction: (extent, resolution, pixelRatio, size, projection) => {
          let canvas = document.createElement("canvas");
          canvas.width = size[0];
          canvas.height = size[1];
          canvas.style.display = "block";
          //设置canvas透明度
          canvas.getContext("2d").globalAlpha = this.params.canvasAlpha;

          //使用分层设色渲染
          kriging.drawCanvasContour(
            dataset,
            "level",
            {
              model: "exponential",
              sigma2: 0,
              alpha: 100,
            },
            canvas,
            [extent[0], extent[2]],
            [extent[1], extent[3]],
            this.params.colors
          );

          return canvas;
        },
        projection: "EPSG:4326",
      });

      krigingCanvasLayer.setSource(imageSource);
      krigingCanvasLayer.setVisible(true);
    },
    showKrigingVector() {
      krigingCanvasLayer.setVisible(false);
      krigingVectorSource.clear();
      krigingVectorLayer.setVisible(true);

      //生成克里金矢量等值面
      let kriging_contours = krigingContour(
        dataset,
        "level",
        {
          model: "exponential",
          sigma2: 0,
          alpha: 100,
        },
        [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
        true
      );

      let features = format.readFeatures(kriging_contours);
      krigingVectorSource.addFeatures(features);
    },
    addkrigingVectorLayer() {
      //克里金矢量等值面
      krigingVectorSource = new VectorSource();
      krigingVectorLayer = new LayerVector({
        source: krigingVectorSource,
        zIndex: 3,
        style: (feature, res)=> {
          //获取等值面分级的权重值
          let _value = feature.get("level");
          //根据权重值，计算所在颜色渲染的区间
          let level = parseInt(_value) / 10;
          let color = this.params.colors[level];

          let style = new Style({
            fill: new Fill({
              color: color,
            }),
            stroke: new Stroke({
              color: color,
              width: 3,
            }),
          });
          return [style];
        },
      });
      this.map.addLayer(krigingVectorLayer);

      //克里金栅格等值面
      krigingCanvasLayer = new ImageLayer({
        zIndex: 2,
      });
      //向map添加图层
      this.map.addLayer(krigingCanvasLayer);
    },
    addVectorLayer() {
      //测试点图层
      var ptlayer = new LayerVector({
        source: new VectorSource(),
        zIndex: 4,
      });
      //生成测试数据
       dataset = {
        type: "FeatureCollection",
        features: [],
      };
      for (let i = 0; i < 100; i++) {
        let feature = {
          type: "Feature",
          properties: {
            level: Math.random() * 100,
          },
          geometry: {
            type: "Point",
            coordinates: [
              this.params.mapCenter[0] + Math.random() * 0.1 - 0.05,
              this.params.mapCenter[1] + Math.random() * 0.1 - 0.05,
            ],
          },
        };
        dataset.features.push(feature);
      }
      format = new GeoJSON();
      ptlayer.getSource().addFeatures(format.readFeatures(dataset));
      this.map.addLayer(ptlayer);
    },
    initMap() {
      let raster = new Tile({
        source: new OSM(),
      });

      let vector = new LayerVector({
        source: this.source,
      });
      this.map = new Map({
        target: this.$refs.map,
        layers: [raster, vector],
        view: new View({
          projection: "EPSG:4326",
          center: this.params.mapCenter,
          zoom: 10,
        }),
      });
      this.addVectorLayer();
      this.addkrigingVectorLayer();
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style>
.btn-x {
  position: absolute;
  left: 45%;
  bottom: 1%;
}
</style>
